<script setup lang="ts">
import { ref, computed, type PropType } from 'vue'
import { NIcon, NPopover, NScrollbar, NAvatar } from 'naive-ui'
import { Atom2, Check } from '@vicons/tabler'
// 删除未使用的导入
// import { getLLMModels } from '@/service/api/llmModels'

interface Model {
  id: string
  name: string
  logo: string
  title: string
}

const props = defineProps({
  models: {
    type: Array as PropType<Model[]>,
    required: true
  },
  currentModel: {
    type: Number,
    required: true
  }
})

const emit = defineEmits<{
  (e: 'update:currentModel', model: Model['id']): void
}>()

const currentModel = computed({
  get: () => props.currentModel,
  set: (newModel) => emit('update:currentModel', newModel)
})

const selectedModel = computed(() => props.models.find((model) => model.id === currentModel.value))
const searchQuery = ref('')
const filteredModels = computed(() =>
  props.models.filter((model) =>
    model.title.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
)

const showPopover = ref(false)

const selectModel = (model: Model) => {
  currentModel.value = model.id
  showPopover.value = false
}
</script>

<template>
  <n-popover
    v-model:show="showPopover"
    trigger="click"
    placement="top-start"
    :style="{
      maxHeight: '300px',
      overflow: 'hidden',
      minWidth: '180px',
      padding: '2px 5px',
      borderRadius: '8px'
    }"
  >
    <template #trigger>
      <CustomButton style="min-width: 80px" bgColor="">
        <template #icon>
          <n-icon size="20" :component="Atom2" v-if="!selectedModel"></n-icon>
          <NAvatar v-else :src="selectedModel.logo" round class="w-20px h-20px" />
        </template>
        <span>{{ selectedModel?.title || '选择模型' }}</span>
      </CustomButton>
    </template>
    <div class="relative">
      <input
        v-model="searchQuery"
        placeholder="搜索模型"
        class="border border-gray-300 rounded-md p-2 w-full mb-2 outline-none bg-gray-100 hover:border-gray-400 focus:border-gray-400 border-solid"
      />
      <NScrollbar style="max-height: 200px">
        <div class="model-list rounded-md">
          <div
            v-for="model in filteredModels"
            :key="model.id"
            @click="selectModel(model)"
            class="rounded-md model-item cursor-pointer p-2 hover:bg-gray-100"
          >
            <div class="flex items-center gap-1">
              <div class="w-20px h-20px rounded-full flex items-center justify-center">
                <NIcon
                  v-if="model.id === currentModel"
                  size="16"
                  :component="Check"
                  class="text-primary"
                />
              </div>
              <NAvatar :src="model.logo" round class="w-20px h-20px" />
              <span>{{ model.title }}</span>
            </div>
          </div>
          <!-- /无搜索值的时候 -->
          <div v-if="filteredModels.length === 0" class="text-gray-500 text-center p-2 text-sm">
            没有找到 {{ searchQuery }} 相关模型
          </div>
        </div>
      </NScrollbar>
    </div>
  </n-popover>
</template>

<style scoped>
.model-list {
  display: flex;
  flex-direction: column;
}

.model-item {
  transition: background-color 0.2s ease;
}

.model-item:not(:last-child) {
  border-bottom: 1px solid #f0f0f0;
}
</style>
